<template>
  <div class="dashboard-container">
    <template>
      <el-select v-model.lazy="clientName" clearable placeholder="请选择FTP客户端">
        <el-option
          v-for="item in clientNames"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-date-picker
        v-model="dateScope"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-button type="primary" size="small" @click="queryFtpRecord(clientName)">查询</el-button>
      <el-table
        :data="ftpRecords"
        style="width: 100%"
      >
        <el-table-column
          prop="uuid"
          label="序号"
          width="180"
        />
        <el-table-column
          prop="localPath"
          label="FTP文件路径"
          type="ref"
        />
        <el-table-column
          prop="updateTime"
          label="下载时间"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope" style="overflow-y:scroll;overflow-x:hidden;height:100%">
            <el-button type="text" size="small" @click="getFtpContent(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-dialog
      title="FTP文件预览"
      :visible.sync="ftpContentShow"
      width="30%"
      :before-close="handleClose"
    >
      <span>{{ ftpContent }}</span>
      <span slot="footer" class="dialog-footer" />
    </el-dialog>
  </div>
</template>

<script>
import { formatterTime } from '@/utils/DateUtil'
export default {
  name: 'CurdFtp',
  data() {
    return {
      clientNames: [],
      clientName: [],
      username: '',
      dateScope: [],
      ftpRecords: [],
      ftpContentShow: false,
      ftpContent: ''
    }
  },
  created() {
    this.getClientNamesByUser()
  },

  methods: {
    handleClose() {
      this.ftpContentShow = false
      this.ftpContent = ''
    },
    getClientNamesByUser() {
      const that = this
      that.clientNames = []
      const userName = JSON.parse(that.$store.getters.userInfo).userName
      that.$store.dispatch('editing/getClientNamesByUser', userName).then(res => {
        if (res.data) {
          for (let i = 0; i < res.data.length; i++) {
            that.clientNames.push({ value: res.data[i]['ftpClientName'], label: res.data[i]['ftpClientName'] })
          }
        }
      })
    },
    queryFtpRecord(clientName) {
      const that = this
      if (this.dateScope.length !== 2) {
        alert('请选择查询时间段')
      }
      const startTime = formatterTime(this.dateScope[0])
      const endTime = formatterTime(this.dateScope[1])
      if (this.clientName.length === 0) {
        alert('请选择FTP客户端')
      }
      const data = {
        startTime,
        endTime,
        clientName
      }
      console.info(data)
      that.$store.dispatch('editing/getFtpRecord', data).then(res => {
        if (res.data) {
          for (let i = 0; i < res.data.length; i++) {
            that.ftpRecords.push(
              { uuid: i,
                localPath: res.data[i]['localPath'],
                updateTime: res.data[i]['updateTime']
              })
          }
        }
      })
    },

    getFtpContent(row) {
      const that = this
      const localPath = row.localPath
      const data = {
        localPath
      }
      console.info(data)
      that.$store.dispatch('editing/readFtpFileContent', data).then(res => {
        if (res.data) {
          this.ftpContent = res.data
          this.ftpContentShow = true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
